<template>
  <div class="legend-con p10 pt0 " :style="{ right:flag ? 0 : `-${190}px` }">
    <ul>
      <li class="f14 colorFFF pt12 pl15" v-for="({color,label},index)  in this.legendData " :key="index">
        <span class="mr10" :style="{'background':color}"></span> {{ label }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "index",
  props: ["legendData"],
  data() {
    return {
      flag: false
    };
  },
  watch: {
    legendData: {
      handler(val) {
        if (val.length > 0) {
          setTimeout(()=>{
            this.flag = true;
          },800)

        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style scoped lang="scss">
.legend-con {
  width: 159px;
  max-height: 300px;
  background: #1F222A;
  box-shadow: -2px 0px 4px 0px rgba(5, 11, 30, 0.4);
  overflow-y: auto;
  position: absolute;
  right: -190px;
  bottom: 30px;
  z-index: 200;
  transition: all 0.7s ease 0ms;

  li {
    display: flex;
    align-items: center;
    font-size: 12px;

    span {
      display: inline-block;
      width: 24px;
      height: 12px;
    }
  }


}

</style>
